/* eslint-disable react-refresh/only-export-components */
import React from "react";
import { Button, Space, SearchBar, Card, Toast, Swiper } from "antd-mobile";
import styles from "./css/index.module.css";
import { lunApi } from "../../../api/shouye";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import dayjs from "dayjs";
function Index() {
  const tiao = useNavigate();
  const dinwei = useSelector((store) => store.ticket.dinwei);
  const chengshi = useSelector((store) => store.ticket.chengshi);
  const start = "北京";
  const end = "南京";
  const date = dayjs().format("YYYY-MM-DD");
  const isSpeed = false;
  const onClick = () => {
    Toast.show("点击了门票");
    tiao(
      `/mengpiao?start=${start}&end=${end}&date=${date}&isSpeed=${isSpeed}`
    );
  };
  const dian = () => {
    tiao("/city");
  };
  return (
    <div className={styles.box}>
      <div className={styles.to}>
        <div>当前城市{dinwei}</div>{" "}
        <div>
          <span>
            <SearchBar placeholder="请输入内容" />
          </span>

          <Button color="primary" fill="solid" className={styles.button}>
            搜索
          </Button>
        </div>
      </div>
      <div className={styles.div2}>
        {chengshi.map((item, index) => (
          <span key={index} onClick={dian}>
            {item}
          </span>
        ))}
      </div>
      <div className={styles.div3}>
        <div className={styles.div31}>
          <Card
            title="景区门票"
            onClick={onClick}
            style={{ backgroundColor: "cadetblue" }}
          >
            <span>景区门票</span>
          </Card>
          <Card
            title="景区门票"
            onClick={onClick}
            style={{ backgroundColor: "blueviolet" }}
          >
            <span>景区门票</span>
          </Card>
          <Card
            title="景区门票"
            onClick={onClick}
            style={{ backgroundColor: "rgb(79, 225, 230)" }}
          >
            <span>景区门票</span>
          </Card>
        </div>
      </div>
      <div className={styles.div4}></div>
      <div className={styles.div5}>
        <div>
          <img src="http://dummyimage.com/370x85/e7f279" alt="" />
        </div>
        <div></div>
        <div></div>
      </div>
    </div>
  );
}

export default Index;

export const loader = async () => {
  const { data: res } = await lunApi();
  return { res };
};
